<template>
  <span>
    <slot>
      <!-- 状态值字段 -->
      <template v-if="item.prop === 'status'">
        <span
          :class="{
            'el-icon-success text-green': scope.row[item.prop] == 1,
            'el-icon-error text-red': scope.row[item.prop] == 0,
          }"
          :style="{ color: scope.row[item.prop] == 0 ? 'red' : 'green' }"
          >{{ scope.row[item.prop] | statusFilter }}</span
        >
      </template>
      <!-- 默认值 -->
      <template v-else>
        {{
          scope.row[item.prop] == null || scope.row[item.prop] === ""
            ? "—"
            : scope.row[item.prop]
        }}
      </template>
    </slot>
  </span>
</template>

<script>
export default {
  name: "TableColumn",
  props: {
    scope: {
      required: true,
      type: Object,
    },
    item: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {};
  },
  filters: {
    // 状态值转换
    statusFilter(status) {
      const statusMap = {
        0: "禁用",
        1: "正常",
      };
      return statusMap[status];
    },
  },
};
</script>

<style>
</style>